<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>水瓶座今日运势 - 星座详情</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: #f5f5f5;
            color: #333;
            padding-bottom: 70px;
        }
        
        /* 导航栏样式 */
        .top-nav {
            background: linear-gradient(135deg, #6b46c1, #805ad5);
            padding: 15px 16px;
            color: white;
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .page-title {
            font-size: 18px;
            font-weight: 600;
            text-align: center;
            margin: 0;
        }
        
        /* 头部信息区 */
        .header-info {
            background-color: white;
            padding: 16px;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .zodiac-header {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
        }
        
        .zodiac-big-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(135deg, #6b46c1, #805ad5);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            margin-right: 15px;
        }
        
        .zodiac-header-text {
            flex: 1;
        }
        
        .zodiac-fullname {
            font-size: 22px;
            font-weight: 600;
            margin-bottom: 3px;
        }
        
        .zodiac-date-range {
            font-size: 13px;
            color: #999;
        }
        
        .lucky-score-big {
            background-color: #f5f7ff;
            color: #6b46c1;
            padding: 5px 12px;
            border-radius: 16px;
            font-size: 15px;
            font-weight: 600;
            display: flex;
            align-items: center;
        }
        
        .lucky-score-big i {
            margin-right: 6px;
        }
        
        /* 主要内容区 */
        .content-container {
            background-color: white;
            margin: 12px 10px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        
        /* 运势概览 */
        .horoscope-overview {
            padding: 16px;
            border-bottom: 1px solid #f5f5f5;
        }
        
        .section-title {
            font-size: 17px;
            font-weight: 600;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
        }
        
        .section-title i {
            color: #6b46c1;
            margin-right: 8px;
        }
        
        .horoscope-content {
            font-size: 15px;
            line-height: 1.7;
            color: #333;
        }
        
        /* 运势指标 */
        .horoscope-metrics {
            padding: 16px;
            border-bottom: 1px solid #f5f5f5;
        }
        
        .metric-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }
        
        .metric-card {
            background-color: #f9f9f9;
            border-radius: 8px;
            padding: 12px;
        }
        
        .metric-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }
        
        .metric-name {
            font-size: 14px;
            font-weight: 500;
            display: flex;
            align-items: center;
        }
        
        .metric-name i {
            margin-right: 6px;
            font-size: 15px;
        }
        
        .metric-value {
            font-size: 15px;
            font-weight: 600;
        }
        
        .metric-bar-container {
            width: 100%;
            height: 8px;
            background-color: #eee;
            border-radius: 4px;
            overflow: hidden;
        }
        
        .metric-bar {
            height: 100%;
            border-radius: 4px;
        }
        
        .love-color {
            color: #ed64a6;
        }
        
        .love-bar {
            background-color: #ed64a6;
        }
        
        .career-color {
            color: #38b2ac;
        }
        
        .career-bar {
            background-color: #38b2ac;
        }
        
        .wealth-color {
            color: #ecc94b;
        }
        
        .wealth-bar {
            background-color: #ecc94b;
        }
        
        .health-color {
            color: #48bb78;
        }
        
        .health-bar {
            background-color: #48bb78;
        }
        
        /* 幸运提示 */
        .lucky-hints {
            padding: 16px;
            border-bottom: 1px solid #f5f5f5;
        }
        
        .hints-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }
        
        .hint-item {
            display: flex;
            align-items: center;
            background-color: #f8f5ff;
            padding: 10px 12px;
            border-radius: 8px;
        }
        
        .hint-icon {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: rgba(107, 70, 193, 0.1);
            color: #6b46c1;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
        }
        
        .hint-text {
            flex: 1;
        }
        
        .hint-label {
            font-size: 12px;
            color: #999;
            margin-bottom: 2px;
        }
        
        .hint-value {
            font-size: 14px;
            font-weight: 500;
        }
        
        /* 图片展示区 */
        .image-gallery {
            padding: 16px;
            border-bottom: 1px solid #f5f5f5;
        }
        
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
        }
        
        .gallery-item {
            border-radius: 8px;
            overflow: hidden;
            position: relative;
            aspect-ratio: 1/1;
        }
        
        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        
        .gallery-more {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.5);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }
        
        /* 互动操作区 */
        .action-bar {
            display: flex;
            padding: 12px 16px;
            border-bottom: 1px solid #f5f5f5;
        }
        
        .action-button {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #666;
            text-decoration: none;
            font-size: 12px;
        }
        
        .action-button i {
            font-size: 20px;
            margin-bottom: 5px;
        }
        
        .action-button.active {
            color: #6b46c1;
        }
        
        /* 评论区 */
        .comments-section {
            background-color: white;
            margin: 12px 10px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            padding: 16px;
        }
        
        .comments-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .comments-count {
            font-size: 16px;
            font-weight: 600;
        }
        
        .sort-comments {
            font-size: 13px;
            color: #6b46c1;
            display: flex;
            align-items: center;
        }
        
        .sort-comments i {
            margin-left: 5px;
            font-size: 12px;
        }
        
        /* 评论输入框 */
        .comment-input-container {
            display: flex;
            margin-bottom: 20px;
            gap: 10px;
        }
        
        .user-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: #eee;
            overflow: hidden;
        }
        
        .user-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .comment-input {
            flex: 1;
            position: relative;
        }
        
        .comment-input textarea {
            width: 100%;
            border: 1px solid #eee;
            border-radius: 20px;
            padding: 10px 15px;
            font-size: 14px;
            resize: none;
            height: 40px;
            transition: height 0.3s;
        }
        
        .comment-input textarea:focus {
            outline: none;
            border-color: #6b46c1;
            height: 80px;
        }
        
        .send-comment {
            position: absolute;
            right: 10px;
            bottom: 10px;
            background-color: #6b46c1;
            color: white;
            border: none;
            border-radius: 50%;
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            cursor: pointer;
        }
        
        /* 评论列表 */
        .comments-list {
            margin-bottom: 15px;
        }
        
        .comment-item {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
        }
        
        .comment-content {
            flex: 1;
        }
        
        .comment-author {
            font-size: 13px;
            font-weight: 500;
            margin-bottom: 5px;
        }
        
        .comment-text {
            background-color: #f5f5f5;
            padding: 10px 12px;
            border-radius: 16px 16px 16px 0;
            font-size: 14px;
            margin-bottom: 5px;
        }
        
        .comment-actions {
            display: flex;
            gap: 15px;
            font-size: 12px;
            color: #999;
        }
        
        .comment-action {
            display: flex;
            align-items: center;
            cursor: pointer;
        }
        
        .comment-action i {
            margin-right: 3px;
            font-size: 12px;
        }
        
        .comment-action:hover {
            color: #6b46c1;
        }
        
        /* 回复 */
        .replies {
            margin-left: 46px;
            margin-top: 10px;
        }
        
        .reply-item {
            display: flex;
            gap: 8px;
            margin-bottom: 10px;
        }
        
        .reply-content {
            flex: 1;
        }
        
        .reply-text {
            background-color: #f5f5f5;
            padding: 8px 10px;
            border-radius: 12px 12px 12px 0;
            font-size: 13px;
            margin-bottom: 3px;
        }
        
        .reply-text .author {
            font-weight: 500;
            color: #6b46c1;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: white;
            border-top: 1px solid #eee;
            display: flex;
            justify-content: space-around;
            padding: 8px 0;
            z-index: 100;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #999;
            text-decoration: none;
            font-size: 10px;
        }
        
        .nav-item.active {
            color: #6b46c1;
        }
        
        .nav-item i {
            font-size: 20px;
            margin-bottom: 4px;
        }
        
        /* 相关推荐 */
        .related-horoscopes {
            background-color: white;
            margin: 12px 10px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            padding: 16px;
        }
        
        .related-list {
            display: flex;
            gap: 10px;
            overflow-x: auto;
            padding-bottom: 5px;
        }
        
        .related-item {
            min-width: 120px;
            border-radius: 8px;
            overflow: hidden;
            background-color: #f9f9f9;
            text-decoration: none;
            color: #333;
        }
        
        .related-image {
            height: 80px;
            overflow: hidden;
        }
        
        .related-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .related-text {
            padding: 8px;
        }
        
        .related-zodiac {
            font-size: 13px;
            font-weight: 500;
            margin-bottom: 3px;
        }
        
        .related-title {
            font-size: 12px;
            color: #666;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav d-flex justify-content-between align-items-center">
        <button class="btn btn-link p-0 text-white">
            <i class="fas fa-arrow-left"></i>
        </button>
        <h1 class="page-title">水瓶座今日运势</h1>
        <button class="btn btn-link p-0 text-white">
            <i class="fas fa-share-alt"></i>
        </button>
    </div>
    
    <!-- 头部信息区 -->
    <div class="header-info">
        <div class="zodiac-header">
            <div class="zodiac-big-icon">
                <i class="fas fa-aquarius"></i>
            </div>
            <div class="zodiac-header-text">
                <div class="zodiac-fullname">水瓶座 (Aquarius)</div>
                <div class="zodiac-date-range">1月20日 - 2月18日</div>
            </div>
            <div class="lucky-score-big">
                <i class="fas fa-star"></i>
                <span>幸运指数 85</span>
            </div>
        </div>
        <div class="date">2023年6月15日 星期四 农历四月廿八</div>
    </div>
    
    <!-- 运势概览 -->
    <div class="content-container">
        <div class="horoscope-overview">
            <h2 class="section-title">
                <i class="fas fa-circle-info"></i> 运势概览
            </h2>
            <div class="horoscope-content">
                今天水瓶座的整体运势呈现上升趋势，尤其是在人际交往方面会有不错的机遇。工作上容易得到同事的帮助，合作项目进展顺利。感情方面，单身者有机会遇到心仪对象，已有伴侣的人感情更加稳定。
                <br><br>
                财运方面表现平稳，不宜进行大额投资。健康状况良好，但要注意作息规律，避免熬夜。今天的你创造力十足，适合开展新的计划或创意工作。
            </div>
        </div>
        
        <!-- 运势指标 -->
        <div class="horoscope-metrics">
            <h2 class="section-title">
                <i class="fas fa-chart-pie"></i> 运势指标
            </h2>
            <div class="metric-grid">
                <div class="metric-card">
                    <div class="metric-header">
                        <div class="metric-name love-color">
                            <i class="fas fa-heart"></i> 爱情
                        </div>
                        <div class="metric-value love-color">90</div>
                    </div>
                    <div class="metric-bar-container">
                        <div class="metric-bar love-bar" style="width: 90%"></div>
                    </div>
                </div>
                
                <div class="metric-card">
                    <div class="metric-header">
                        <div class="metric-name career-color">
                            <i class="fas fa-briefcase"></i> 事业
                        </div>
                        <div class="metric-value career-color">80</div>
                    </div>
                    <div class="metric-bar-container">
                        <div class="metric-bar career-bar" style="width: 80%"></div>
                    </div>
                </div>
                
                <div class="metric-card">
                    <div class="metric-header">
                        <div class="metric-name wealth-color">
                            <i class="fas fa-coins"></i> 财运
                        </div>
                        <div class="metric-value wealth-color">75</div>
                    </div>
                    <div class="metric-bar-container">
                        <div class="metric-bar wealth-bar" style="width: 75%"></div>
                    </div>
                </div>
                
                <div class="metric-card">
                    <div class="metric-header">
                        <div class="metric-name health-color">
                            <i class="fas fa-heartbeat"></i> 健康
                        </div>
                        <div class="metric-value health-color">85</div>
                    </div>
                    <div class="metric-bar-container">
                        <div class="metric-bar health-bar" style="width: 85%"></div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 幸运提示 -->
        <div class="lucky-hints">
            <h2 class="section-title">
                <i class="fas fa-lightbulb"></i> 幸运提示
            </h2>
            <div class="hints-grid">
                <div class="hint-item">
                    <div class="hint-icon">
                        <i class="fas fa-palette"></i>
                    </div>
                    <div class="hint-text">
                        <div class="hint-label">幸运色</div>
                        <div class="hint-value">紫色、浅蓝色</div>
                    </div>
                </div>
                
                <div class="hint-item">
                    <div class="hint-icon">
                        <i class="fas fa-hashtag"></i>
                    </div>
                    <div class="hint-text">
                        <div class="hint-label">幸运数字</div>
                        <div class="hint-value">7、16、25</div>
                    </div>
                </div>
                
                <div class="hint-item">
                    <div class="hint-icon">
                        <i class="fas fa-location-dot"></i>
                    </div>
                    <div class="hint-text">
                        <div class="hint-label">幸运方位</div>
                        <div class="hint-value">西北方</div>
                    </div>
                </div>
                
                <div class="hint-item">
                    <div class="hint-icon">
                        <i class="fas fa-utensils"></i>
                    </div>
                    <div class="hint-text">
                        <div class="hint-label">幸运食物</div>
                        <div class="hint-value">蓝莓、坚果</div>
                    </div>
                </div>
                
                <div class="hint-item">
                    <div class="hint-icon">
                        <i class="fas fa-handshake"></i>
                    </div>
                    <div class="hint-text">
                        <div class="hint-label">速配星座</div>
                        <div class="hint-value">双子座、天秤座</div>
                    </div>
                </div>
                
                <div class="hint-item">
                    <div class="hint-icon">
                        <i class="fas fa-calendar-check"></i>
                    </div>
                    <div class="hint-text">
                        <div class="hint-label">今日适合</div>
                        <div class="hint-value">社交、创意工作</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 图片展示区 -->
        <div class="image-gallery">
            <h2 class="section-title">
                <i class="fas fa-images"></i> 相关图片
            </h2>
            <div class="gallery-grid">
                <div class="gallery-item">
                    <img src="https://picsum.photos/id/1025/400/400" alt="水瓶座运势图片1">
                </div>
                <div class="gallery-item">
                    <img src="https://picsum.photos/id/1045/400/400" alt="水瓶座运势图片2">
                </div>
                <div class="gallery-item">
                    <img src="https://picsum.photos/id/1059/400/400" alt="水瓶座运势图片3">
                    <div class="gallery-more">+5</div>
                </div>
            </div>
        </div>
        
        <!-- 互动操作区 -->
        <div class="action-bar">
            <a href="#" class="action-button active">
                <i class="far fa-heart"></i>
                <span>收藏</span>
            </a>
            <a href="#" class="action-button">
                <i class="far fa-thumbs-up"></i>
                <span>点赞 (128)</span>
            </a>
            <a href="#" class="action-button">
                <i class="far fa-comment"></i>
                <span>评论 (32)</span>
            </a>
            <a href="#" class="action-button">
                <i class="far fa-bookmark"></i>
                <span>记录</span>
            </a>
        </div>
    </div>
    
    <!-- 相关推荐 -->
    <div class="related-horoscopes">
        <h2 class="section-title">
            <i class="fas fa-compass"></i> 相关推荐
        </h2>
        <div class="related-list">
            <a href="#" class="related-item">
                <div class="related-image">
                    <img src="https://picsum.photos/id/1062/300/300" alt="双鱼座明日运势">
                </div>
                <div class="related-text">
                    <div class="related-zodiac">双鱼座</div>
                    <div class="related-title">明日爱情运势解析</div>
                </div>
            </a>
            <a href="#" class="related-item">
                <div class="related-image">
                    <img src="https://picsum.photos/id/1074/300/300" alt="水瓶座本周运势">
                </div>
                <div class="related-text">
                    <div class="related-zodiac">水瓶座</div>
                    <div class="related-title">本周事业发展指南</div>
                </div>
            </a>
            <a href="#" class="related-item">
                <div class="related-image">
                    <img src="https://picsum.photos/id/1079/300/300" alt="12星座财运">
                </div>
                <div class="related-text">
                    <div class="related-zodiac">全星座</div>
                    <div class="related-title">六月财运排行榜</div>
                </div>
            </a>
            <a href="#" class="related-item">
                <div class="related-image">
                    <img src="https://picsum.photos/id/1080/300/300" alt="星座配对">
                </div>
                <div class="related-text">
                    <div class="related-zodiac">水瓶座</div>
                    <div class="related-title">最佳配对星座分析</div>
                </div>
            </a>
        </div>
    </div>
    
    <!-- 评论区 -->
    <div class="comments-section">
        <div class="comments-header">
            <div class="comments-count">全部评论 (32)</div>
            <div class="sort-comments">
                最新 <i class="fas fa-chevron-down"></i>
            </div>
        </div>
        
        <!-- 评论输入框 -->
        <div class="comment-input-container">
            <div class="user-avatar">
                <img src="https://picsum.photos/id/1005/100/100" alt="用户头像">
            </div>
            <div class="comment-input">
                <textarea placeholder="分享你的想法..."></textarea>
                <button class="send-comment">
                    <i class="fas fa-paper-plane"></i>
                </button>
            </div>
        </div>
        
        <!-- 评论列表 -->
        <div class="comments-list">
            <!-- 评论1 -->
            <div class="comment-item">
                <div class="user-avatar">
                    <img src="https://picsum.photos/id/1012/100/100" alt="用户头像">
                </div>
                <div class="comment-content">
                    <div class="comment-author">星辰大海</div>
                    <div class="comment-text">今天真的遇到了心仪的人！太准了，水瓶座加油！</div>
                    <div class="comment-actions">
                        <div class="comment-action">
                            <i class="far fa-thumbs-up"></i> 24
                        </div>
                        <div class="comment-action reply-btn">
                            <i class="far fa-reply"></i> 回复
                        </div>
                        <div class="comment-action">
                            <i class="far fa-clock"></i> 2小时前
                        </div>
                    </div>
                    
                    <!-- 回复 -->
                    <div class="replies">
                        <div class="reply-item">
                            <div class="user-avatar">
                                <img src="https://picsum.photos/id/1027/100/100" alt="用户头像">
                            </div>
                            <div class="reply-content">
                                <div class="reply-text">
                                    <span class="author">水瓶座守护星</span>：恭喜呀！希望能有好发展~
                                </div>
                                <div class="comment-actions">
                                    <div class="comment-action">
                                        <i class="far fa-thumbs-up"></i> 8
                                    </div>
                                    <div class="comment-action reply-btn">
                                        <i class="far fa-reply"></i> 回复
                                    </div>
                                    <div class="comment-action">
                                        <i class="far fa-clock"></i> 1小时前
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 评论2 -->
            <div class="comment-item">
                <div class="user-avatar">
                    <img src="https://picsum.photos/id/1025/100/100" alt="用户头像">
                </div>
                <div class="comment-content">
                    <div class="comment-author">风之语</div>
                    <div class="comment-text">事业运确实不错，今天项目顺利通过了，感谢水瓶座的好运加持！</div>
                    <div class="comment-actions">
                        <div class="comment-action">
                            <i class="far fa-thumbs-up"></i> 16
                        </div>
                        <div class="comment-action reply-btn">
                            <i class="far fa-reply"></i> 回复
                        </div>
                        <div class="comment-action">
                            <i class="far fa-clock"></i> 4小时前
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 评论3 -->
            <div class="comment-item">
                <div class="user-avatar">
                    <img src="https://picsum.photos/id/1066/100/100" alt="用户头像">
                </div>
                <div class="comment-content">
                    <div class="comment-author">蓝色梦境</div>
                    <div class="comment-text">幸运色是紫色，刚好今天穿了紫色的衣服，希望一整天都有好运！</div>
                    <div class="comment-actions">
                        <div class="comment-action">
                            <i class="far fa-thumbs-up"></i> 9
                        </div>
                        <div class="comment-action reply-btn">
                            <i class="far fa-reply"></i> 回复
                        </div>
                        <div class="comment-action">
                            <i class="far fa-clock"></i> 5小时前
                        </div>
                    </div>
                    
                    <!-- 回复 -->
                    <div class="replies">
                        <div class="reply-item">
                            <div class="user-avatar">
                                <img src="https://picsum.photos/id/1074/100/100" alt="用户头像">
                            </div>
                            <div class="reply-content">
                                <div class="reply-text">
                                    <span class="author">星座达人</span>：紫色确实很适合水瓶座，会带来创造力哦！
                                </div>
                                <div class="comment-actions">
                                    <div class="comment-action">
                                        <i class="far fa-thumbs-up"></i> 3
                                    </div>
                                    <div class="comment-action reply-btn">
                                        <i class="far fa-reply"></i> 回复
                                    </div>
                                    <div class="comment-action">
                                        <i class="far fa-clock"></i> 4小时前
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 加载更多评论 -->
        <button class="btn btn-link w-100 text-center text-secondary">
            加载更多评论
        </button>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-item">
            <i class="fas fa-home"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-item active">
            <i class="fas fa-star"></i>
            <span>星座</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-compass"></i>
            <span>发现</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-bell"></i>
            <span>通知</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-user"></i>
            <span>我的</span>
        </a>
    </div>

    <!-- Bootstrap 5 JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 收藏按钮交互
            const favoriteBtn = document.querySelector('.action-button .fa-heart').closest('.action-button');
            favoriteBtn.addEventListener('click', function(e) {
                e.preventDefault();
                const icon = this.querySelector('i');
                if (icon.classList.contains('far')) {
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                    this.classList.add('active');
                } else {
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                    this.classList.remove('active');
                }
            });
            
            // 点赞按钮交互
            const likeBtn = document.querySelector('.action-button .fa-thumbs-up').closest('.action-button');
            likeBtn.addEventListener('click', function(e) {
                e.preventDefault();
                const icon = this.querySelector('i');
                if (icon.classList.contains('far')) {
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                    this.classList.add('active');
                    
                    // 更新点赞数
                    const countText = this.querySelector('span').textContent;
                    const count = parseInt(countText.match(/\d+/)[0]) + 1;
                    this.querySelector('span').textContent = `点赞 (${count})`;
                } else {
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                    this.classList.remove('active');
                    
                    // 更新点赞数
                    const countText = this.querySelector('span').textContent;
                    const count = parseInt(countText.match(/\d+/)[0]) - 1;
                    this.querySelector('span').textContent = `点赞 (${count})`;
                }
            });
            
            // 评论点赞交互
            document.querySelectorAll('.comment-action .fa-thumbs-up').forEach(icon => {
                const action = icon.closest('.comment-action');
                action.addEventListener('click', function(e) {
                    e.stopPropagation();
                    if (icon.classList.contains('far')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        this.style.color = '#6b46c1';
                        
                        // 更新点赞数
                        const countText = this.textContent.trim();
                        const count = parseInt(countText.match(/\d+/)[0]) + 1;
                        this.innerHTML = `<i class="fas fa-thumbs-up"></i> ${count}`;
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        this.style.color = '';
                        
                        // 更新点赞数
                        const countText = this.textContent.trim();
                        const count = parseInt(countText.match(/\d+/)[0]) - 1;
                        this.innerHTML = `<i class="far fa-thumbs-up"></i> ${count}`;
                    }
                });
            });
            
            // 回复按钮交互
            document.querySelectorAll('.reply-btn').forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    // 在实际应用中，这里可以显示回复输入框
                    alert('回复功能将在这里实现');
                });
            });
            
            // 评论排序交互
            document.querySelector('.sort-comments').addEventListener('click', function() {
                // 在实际应用中，这里可以切换排序方式
                alert('排序功能将在这里实现');
            });
            
            // 发送评论交互
            document.querySelector('.send-comment').addEventListener('click', function() {
                const textarea = this.closest('.comment-input').querySelector('textarea');
                const commentText = textarea.value.trim();
                
                if (commentText) {
                    // 在实际应用中，这里会发送评论到服务器
                    alert(`发送评论: ${commentText}`);
                    textarea.value = '';
                    textarea.style.height = '40px';
                }
            });
            
            // 评论输入框自动调整高度
            const textarea = document.querySelector('.comment-input textarea');
            textarea.addEventListener('input', function() {
                this.style.height = 'auto';
                this.style.height = (this.scrollHeight > 80 ? 80 : this.scrollHeight) + 'px';
            });
        });
    </script>
</body>
</html>

